<template>
  <div class="common_box" :style="{ height: height, width: width }">
    <div class="content_box">
      <slot></slot>
    </div>
    <div class="title">{{ title }}</div>
    <div class="left_top_border"></div>
    <div class="right_top_border"></div>
    <div class="left_bottom_border"></div>
    <div class="right_bottom_border"></div>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: '295px',
    },
    width: {
      type: String,
      default: '370px',
    },
    title: {
      type: String,
      default: '测试题库建设',
    },
  },
}
</script>

<style scoped lang="scss">
.common_box {
  border: 1px solid rgba(107, 144, 182, 1);
  box-sizing: border-box;
  padding: 3px;
  position: relative;
  .title {
    position: absolute;
    top: -10px;
    left: 30%;
    width: 200px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #ace8f8;
    text-align: center;
    background: url('../../assets/images/main/title_bg2.svg') no-repeat;
    background-size: 100% 100%;
  }
  .content_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background: linear-gradient(
      90deg,
      rgba(15, 34, 85, 1) 0%,
      rgba(15, 34, 85, 1) 0%,
      rgba(40, 75, 117, 1) 100%,
      rgba(40, 75, 117, 1) 100%
    );
    border: 3px solid #6b90b6;
    border-radius: 3px;
  }
  .left_top_border {
    width: 15px;
    height: 15px;
    position: absolute;
    top: -2px;
    left: -2px;
    border-left: 2px solid #caedf5;
    border-top: 2px solid #caedf5;
    border-radius: 3px 0 0 0;
  }
  .right_top_border {
    width: 15px;
    height: 15px;
    position: absolute;
    top: -2px;
    right: -2px;
    border-top: 2px solid #caedf5;
    border-right: 2px solid #caedf5;
    border-radius: 3px;
    border-radius: 0 3px 0 0;
  }
  .right_bottom_border {
    width: 15px;
    height: 15px;
    position: absolute;
    right: -2px;
    bottom: -2px;
    border-right: 2px solid #caedf5;
    border-bottom: 2px solid #caedf5;
    border-radius: 0 0 3px 0;
  }
  .left_bottom_border {
    width: 15px;
    height: 15px;
    position: absolute;
    left: -2px;
    bottom: -2px;
    border-left: 2px solid #caedf5;
    border-bottom: 2px solid #caedf5;
    border-radius: 0 0 0 3px;
  }
}
</style>